React Native অ্যাপে নেভিগেশন খুবই গুরুত্বপূর্ণ। বিভিন্ন স্ক্রীনে ব্যবহারকারীকে পরিচালনা করার জন্য নেভিগেশন সিস্টেম ব্যবহার করা হয়। React Navigation লাইব্রেরি React Native অ্যাপে বিভিন্ন ধরনের নেভিগেশন পরিচালনা করতে সহায়ক, যেমন Bottom Tab Navigator এবং Custom Navigators।
নিচে Bottom Tab Navigator এবং Custom Navigators এর ব্যবহার এবং কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হয়েছে।
1. Bottom Tab Navigator
Bottom Tab Navigator একটি জনপ্রিয় নেভিগেশন প্যাটার্ন, যেখানে স্ক্রীনগুলির মধ্যে স্যুইচ করতে একটি নেভিগেশন বার স্ক্রীনের নিচে থাকে। সাধারণত এটি অ্যাপের বিভিন্ন প্রধান বিভাগে নেভিগেট করার জন্য ব্যবহৃত হয়।
ইনস্টলেশন
প্রথমে আপনাকে react-navigation এবং react-navigation-tabs ইনস্টল করতে হবে:
npm install @react-navigation/native @react-navigation/bottom-tabsএছাড়াও, আপনি react-native-gesture-handler এবং react-native-reanimated লাইব্রেরি ইনস্টল করতে পারেন, যেগুলি নেভিগেশন চলাকালীন অ্যানিমেশন এবং গেস্টার সাপোর্টে সহায়ক।
npm install react-native-gesture-handler react-native-reanimatedনেভিগেশন সেটআপ
BottomTabNavigator ব্যবহারের জন্য আপনাকে প্রথমে নেভিগেশন কনটেইনার সেটআপ করতে হবে এবং তারপর ট্যাব নেভিগেটর তৈরি করতে হবে:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen'; // আপনার স্ক্রীন অনুযায়ী
import SettingsScreen from './screens/SettingsScreen';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}এখানে, Tab.Navigator ব্যবহৃত হয়েছে যেখানে দুটি স্ক্রীন যুক্ত করা হয়েছে, Home এবং Settings।
অ্যাডভান্সড কাস্টমাইজেশন
React Navigation এর Bottom Tab Navigator কাস্টমাইজ করা যায়। আপনি আইকন, স্টাইল, এবং নেভিগেশন বারের অ্যানিমেশন কাস্টমাইজ করতে পারেন।
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'ios-home' : 'ios-home-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-settings' : 'ios-settings-outline';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}এখানে, Ionicons লাইব্রেরি ব্যবহার করা হয়েছে আইকন সেট করার জন্য, এবং স্ক্রীনের অ্যাকটিভ এবং ইনঅ্যাকটিভ ট্যাবগুলির জন্য আলাদা রঙ ব্যবহার করা হয়েছে।
2. Custom Navigators
Custom Navigators হল এমন নেভিগেশন সিস্টেম যা ডেভেলপার নিজে তৈরি করে এবং তার প্রয়োজন অনুযায়ী কাস্টমাইজ করে। React Navigation এ আপনি Stack, Tab, Drawer বা অন্য যে কোন নেভিগেটর কাস্টমাইজ করতে পারেন, অথবা সম্পূর্ণ নতুন কাস্টম নেভিগেশন তৈরি করতে পারেন।
Custom Stack Navigator
একটি Custom Stack Navigator তৈরি করতে, প্রথমে createStackNavigator ব্যবহার করে একটি স্ট্যাক নেভিগেটর তৈরি করুন:
npm install @react-navigation/stackএবং তারপরে আপনি একটি কাস্টম স্ট্যাক নেভিগেটর তৈরি করতে পারেন:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}এখানে, headerStyle, headerTintColor, এবং headerTitleStyle কাস্টমাইজ করে একটি কাস্টম স্ট্যাক নেভিগেটর তৈরি করা হয়েছে।
Custom Drawer Navigator
আপনি চাইলে Drawer Navigator কাস্টমাইজ করতে পারেন এবং একটি কাস্টম সাইড মেনু তৈরি করতে পারেন:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#42f44b' },
drawerStyle: {
backgroundColor: '#f0f0f0',
width: 240,
},
}}
>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}এখানে, Drawer.Navigator এর মাধ্যমে সাইড মেনু তৈরি করা হয়েছে এবং drawerStyle ব্যবহার করে সাইড মেনুর স্টাইল কাস্টমাইজ করা হয়েছে।
সারাংশ
- Bottom Tab Navigator ব্যবহার করে স্ক্রীনগুলির মধ্যে নেভিগেট করতে পারেন, যেখানে স্ক্রীনের নিচে ট্যাব বার থাকে।
- Custom Navigators আপনাকে নিজের নেভিগেশন প্যাটার্ন তৈরি করতে সহায়ক, যেখানে আপনি নেভিগেশন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি Stack, Drawer, বা আপনার নিজের কাস্টম নেভিগেশন সিস্টেম তৈরি করতে পারেন।
React Navigation-এর মাধ্যমে, আপনি বিভিন্ন ধরণের নেভিগেশন সিস্টেম তৈরি করতে পারেন এবং প্রয়োজন অনুসারে নেভিগেশন প্যাটার্ন কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করে।
Read more
